<template>
  <div class="shebao-detail-list">
    <a-button icon="left" type="link" @click="$router.go(-1)">返回</a-button>
    <a-row class="content-top">
      <!-- <step :current="1" /> -->
    </a-row>
    <navItem :options="tabs" @change="handleNav" />
    <!-- start -->
    <div class="table-box">
      <a-table
        :columns="columns"
        :data-source="dataSource"
        :pagination="pagination"
        :row-key="(a, b) => b"
        class="mg_t24"
        @change="handlePage"
      >
        <template slot="customName" slot-scope="text, record">
          <img v-if="record.noError" style="width: 24px" src="@/assets/img/shebaopaidan/Info2@2x.png" alt />
          <img v-else style="width: 24px" src="@/assets/img/shebaopaidan/Info-Circle@2x.png" alt />
          {{ record.name }}
        </template>
        <template slot="fundStartDate" slot-scope="record">{{ moment(record).format("YYYY-MM-DD") }}</template>

        <template slot="socProgName" slot-scope="record">
          <span :style="hasPaidan(record) ? '' : 'color:red'">{{ record }}</span>
        </template>
        <template slot="socStartDate" slot-scope="record">{{ moment(record).format("YYYY-MM-DD") }}</template>
        <template slot="assignCompanyName" slot-scope="text, record">{{ record.noError ? record.assignCompanyName : "--" }}</template>
        <template slot="action" slot-scope="record">
          <span class="primary" @click="deleteItem(record)">删除</span>
        </template>
        <div slot="expandedRowRender" slot-scope="text" class="expend-box" style="padding: 0; margin: 0">
          <a-row type="flex" align="middle">
            <a-col class="info-left">
              <a-row class="center">
                <a-avatar src="avatar.png" :size="64" />
              </a-row>
              <a-row class="center name">
                <strong>{{ text.name }}</strong>
              </a-row>
              <a-divider :dashed="true" />

              <a-row class="info-item">
                <a-col class="sub_tit" :span="12">身份证号</a-col>
                <a-col :span="12">{{ text.idCard }}</a-col>
              </a-row>
              <a-row class="info-item">
                <a-col class="sub_tit" :span="12">个人社保号</a-col>
                <a-col :span="12">--</a-col>
              </a-row>
              <a-row class="info-item">
                <a-col class="sub_tit" :span="12">个人公积金号</a-col>
                <a-col :span="12">--</a-col>
              </a-row>
              <a-row class="info-item">
                <a-col class="sub_tit" :span="12">参保城市</a-col>
                <a-col :span="12">{{ text.socCityName }}</a-col>
              </a-row>
              <a-row class="info-item">
                <a-col class="sub_tit" :span="12">缴纳方案</a-col>
                <a-col :span="12">{{ text.socProgName }}</a-col>
              </a-row>
              <a-divider :dashed="true" />
              <a-row type="flex" align="middle">
                <a-button @click="editor(text)">编辑</a-button>
              </a-row>
            </a-col>
            <a-col style="flex: 1">
              <a-table :row-key="(a, b) => b" :columns="innerColumns" :data-source="text.socDispatchEmpItemList || []" :pagination="false">
                <template slot="persentPersonal" slot-scope="persentPersonal"> {{ persentPersonal }}%</template>
                <template slot="persentCompany" slot-scope="persentCompany"> {{ persentCompany }}%</template>
              </a-table>
              <a-row type="flex" class="inner-right-foot">
                <a-col :span="15">
                  <strong>缴费合计</strong>
                </a-col>
                <a-col :span="3" class="center">
                  <strong>{{ text.personalAmount || "--" }}</strong>
                </a-col>
                <a-col :span="3" class="center">
                  <strong>{{ text.companyAmount || "--" }}</strong>
                </a-col>
                <a-col :span="3" class="center">
                  <strong>
                    <span class="primary">{{ text.allAmount || "--" }}</span>
                  </strong>
                </a-col>
              </a-row>
            </a-col>
          </a-row>
          <div />
        </div>
      </a-table>
    </div>
    <editor-modal :show="editorShow" :options="editorOptions" @change="editorCb" />
    <!-- end -->

    <a-row class="foot">
      <a-button type="primary" @click="reUpload">重新上传</a-button>
      <a-button :disabled="!dataSource.length" @click="upload">派单</a-button>
    </a-row>
  </div>
</template>
<script>
const columns = [
  {
    title: "姓名",
    dataIndex: "name",

    scopedSlots: { customRender: "customName" },
    ellipsis: true
  },
  {
    title: "参保城市",
    dataIndex: "socCityName",

    ellipsis: true
  },
  { title: "身份证号", dataIndex: "idCard", width: 200, ellipsis: true },
  {
    title: "参保方案",
    dataIndex: "socProgName",
    scopedSlots: { customRender: "socProgName" },

    ellipsis: true
  },
  {
    title: "社保起缴时间",
    dataIndex: "socStartDate",
    scopedSlots: { customRender: "socStartDate" },

    ellipsis: true
  },
  {
    title: "住房公积金起缴时间",
    dataIndex: "fundStartDate",
    scopedSlots: { customRender: "fundStartDate" },
    ellipsis: true
  },
  {
    title: "指派公司",
    dataIndex: "assignCompanyName",
    scopedSlots: { customRender: "assignCompanyName" },

    ellipsis: true
  },
  {
    title: "操作",
    dataIndex: "",
    scopedSlots: { customRender: "action" },

    ellipsis: true
  }
];
const innerColumns = [
  {
    title: "缴纳项目",
    dataIndex: "itemName",

    ellipsis: true
  },
  {
    title: "缴费基数",
    dataIndex: "cardinalityPerson",

    ellipsis: true
  },
  {
    title: "个人比例",
    dataIndex: "persentPersonal",
    scopedSlots: { customRender: "persentPersonal" },

    ellipsis: true
  },
  {
    title: "公司比例",
    dataIndex: "persentCompany",
    scopedSlots: { customRender: "persentCompany" },

    ellipsis: true
  },
  {
    title: "个人缴费",
    dataIndex: "amountPersonal",

    ellipsis: true
  },
  {
    title: "公司交费",
    dataIndex: "amountCompany",

    ellipsis: true
  },
  {
    title: "缴费合计",
    dataIndex: "amountAll",

    ellipsis: true
  }
];

import step from "./common/step";
import navItem from "./common/nav-item";
import editorModal from "./common/editor-modal";
import { mapState } from "vuex";
export default {
  name: "ShebaoDetailList",
  components: {
    //  step,

    navItem,
    editorModal
  },
  data() {
    return {
      progList: [],
      editorShow: false,
      editorOptions: {},
      columns,
      innerColumns,
      tabs: {},
      pagination: {
        pageSize: 10,
        current: 1,
        total: 0
      },
      titles: {},
      dataSource: [],
      params: {
        pageNo: 1,
        pageSize: 10
      }
    };
  },
  computed: {
    ...mapState(["hr"])
  },
  created() {
    this.getList();
    this.getNavs();
    this.getcbList();
  },
  methods: {
    // 获取参保方案
    getcbList() {
      this.$request({ url: `/hr/api/v1/socProgs/listAllRelation` }).then(({ data }) => {
        this.progList = data;
      });
    },
    hasPaidan(name) {
      return this.progList.find((item) => item.progName === name);
    },
    editorCb(e) {
      this.editorShow = false;
      if (Object.keys(e.options).length) {
        this.editorOptions = e.options;
        this.editorOptions.itemUpdateList = this.editorOptions.socDispatchEmpItemList.map((item) => {
          return {
            baseAmount: item.cardinalityDefault,
            itemName: item.itemName
          };
        });
      }
      if (e.onOk) {
        this.$request({
          url: `/hr/api/v1/socDispatchEmpAdds/updateEmpAndItem`,
          method: "put",
          data: e.options
        }).then(({ success }) => {
          if (success) {
            this.getList();
            this.getNavs();
          }
        });
      }
    },
    getList() {
      this.$request({
        url: `/hr/api/v1/socDispatchEmpAdds`,
        params: {
          ...this.params,
          socDispatchId: this.$route.query.id,
          showItem: true
        }
      }).then(({ data }) => {
        this.dataSource = data.entities;
        this.pagination.total = data.entityCount;
      });
    },
    getNavs() {
      this.$request({
        url: `/hr/api/v1/socDispatches/findDetails/${this.$route.query.id}`
      }).then(({ data }) => {
        this.tabs = data;
      });
    },
    handleNav(e) {},
    selectItem(e) {},
    handlePage(e) {
      this.params.pageNo = e.current;
      this.getList();
    },
    // 重新上传
    reUpload() {
      this.$router.push({ path: "/shebao/shebaoPaidan/shebaoUpload" });
    },
    // 上传
    upload() {
      this.$request({
        url: `/hr/api/v1/socDispatches/dispatchSend/${this.$route.query.id}`,
        method: "put"
      })
        .then(({ success, data }) => {
          if (success) {
            this.$router.push({
              path: "/shebao/shebaoPaidan/shebao-detail-add-third",
              query: {
                unSendCount: this.pagination.total,
                ...this.$route.query,
                data
              }
            });
          }
        })
        .catch((err) => {
          console.log("debug log --> ", err);
          throw err;
        });
    },
    expandChange(expanded, record) {},
    // 编辑
    editor(type) {
      this.editorShow = true;
      this.editorOptions = type;
    },
    // 参保记录
    history(e) {}, // 删除item
    deleteItem({ id }) {
      this.$confirm({
        title: "确定删除?",
        okType: "danger",
        onOk: () => {
          this.$request({
            url: `/hr/api/v1/socDispatchEmpAdds/${id}`,
            method: "delete"
          }).then(({ success }) => {
            if (success) {
              this.$notification["success"]({ message: "删除成功" });
              this.getList();
              this.getNavs();
            }
          });
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.shebao-detail-list {
  padding: 24px;
  .content-top {
    margin-top: 24px;
    padding: 40px 25%;
    background: #fafafa;
    border-radius: 4px;
  }
  .salary {
    cursor: pointer;
    margin: 24px 0;
    .item {
      padding: 24px;
      text-align: center;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    >>> .ant-statistic-content {
      font-size: 18px;
    }
  }
  .foot {
    height: 64px;
    line-height: 64px;
    text-align: end;
  }
  .center {
    text-align: center;
  }
  .info-left {
    border-right: 1px solid #ccc;
    padding: 20px 56px 30px 0;
    width: 350px;

    .info-item {
      line-height: 34px;
    }
    .name {
      margin-top: 16px;
    }
  }
  .inner-right-foot {
    padding: 16px;
  }
  .table-box {
    overflow: auto;
  }
}
</style>
